package myJs.cps.myTable

import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.all._
import myJs.cps._
import myJs.myPkg.i18n.ReactI18next

import scala.scalajs.js
import cats.effect._
import japgolly.scalajs.react.util.EffectCatsEffect._

/** Created by yz on 15/9/2023
  */
object DateSearchLiCp {

  case class Props(
      startDate: String,
      startDateChange: String => IO[Unit],
      endDate: String,
      endDateChange: String => IO[Unit]
  ){
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>
    li(
      className := "myLi myInputLi dateInput",
      div(
        marginBottom := 10.px,
        span(className := "fa fa-filter"),
        s" 日期检索"
      ),
      div(
        marginBottom := 10.px,
        className := "form-group",
        div(
          className := "col-sm-12",
          PureDatePickerCp.Props(
            placeHolder = s"起始",
            name = "startTime",
            value = props.startDate,
            onChangeF = props.startDateChange
          ).render
        )
      ),
      div(
        className := "form-group",
        div(
          className := "col-sm-12",
          PureDatePickerCp.Props(
            placeHolder = s"终止",
            name = "endTime",
            value = props.endDate,
            onChangeF = props.endDateChange
          ).render
        )
      )
    )

  }

}
